<template>
  <div class="container">
    <!--    <a-card hoverable :style="{ width: '360px', marginBottom: '20px' }" style="margin: 20px;background: #f6f6f6">-->
    <!--      <div-->
    <!--          :style="{-->
    <!--        display: 'flex',-->
    <!--        alignItems: 'center',-->
    <!--        justifyContent: 'space-between',-->
    <!--      }"-->
    <!--      >-->
    <!--      <span-->
    <!--          :style="{ display: 'flex', alignItems: 'center', color: '#1D2129' }"-->
    <!--      >-->
    <!--       <a-avatar>-->
    <!--      <img-->
    <!--          alt="avatar"-->
    <!--          :src="dataList?.picUrl"-->
    <!--      />-->
    <!--    </a-avatar>-->
    <!--        <a-typography-text style="margin: 0 10px">{{ dataList?.name }}</a-typography-text>-->
    <!--      </span>-->
    <!--        <a-link>个人主页</a-link>-->
    <!--      </div>-->
    <!--    </a-card>-->
    <atable :dataList="dataList"></atable>
  </div>
</template>


<script setup>
import {ref, onActivated, onDeactivated, watch} from "vue"
import {useRoute} from "vue-router";
import {GetsingerDetailsApi, GetalbumApi, GetkeywordsListApi} from "~/commonApi/api"
import atable from "~/pages/detail/conponents/table.vue"
import {useStore} from "vuex";

const activeName = ref('first')
const route = useRoute()
const dataList = ref([])
const albumList = ref([])
//获取歌手ID
const id = ref('')
const keywords = ref('')
id.value = route.query.id
keywords.value = route.query.keywords
const getdataList = async () => {
  // const res = await GetsingerDetailsApi(keywords.value)
  const res = await GetkeywordsListApi(keywords.value)
  console.log(res.result.artists, 'resuqlt')
  // albumList.value = resuqlt.hotAlbums
  dataList.value = res.result.songs
}
const store = useStore()
watch(() => store.state.keywords, (newVlaue, oldValue) => {
  if (store.state.keywords) {
    keywords.value = newVlaue
    getdataList()
  }
})
getdataList()

const handleClick = (tab) => {
  console.log(tab)
}


</script>

<style scoped lang="scss">
.container {
  overflow-y: scroll;
  height: 100vh;
}

.container_top {
  display: flex;
  margin: 1rem;


}

:deep(.el-tabs__nav-wrap)::after {
  content: none;
}

.cradSong {
  display: grid;
  grid-gap: 3rem;
  grid-template-columns: repeat(5, 16%);
}

</style>